<template>
<div>
  <x-header id="head_top" :left-options="{showBack: false}">任务列表<a slot="right">wangze</a></x-header>
  <div>
    <flexbox>
      <flexbox-item :span="6/9">
      <div>
      
      <tab v-model="tabIndex" :animate="true">
      <tab-item @on-item-click="onItemClick" active-class="active-6-1"><span class="iconfont icon-daiban"></span>待办</tab-item>
      <tab-item @on-item-click="onItemClick" active-class="active-6-2"><span class="iconfont icon-yiban"></span>已办</tab-item>
      <tab-item @on-item-click="onItemClick" active-class="active-6-3"><span class="iconfont icon-quanbu"></span>全部</tab-item>
  </tab>
  </div>
  </flexbox-item>
      <flexbox-item :span="3/9">
      <div>
        <x-button mini @click.native="showSearch"><icon type="search"></icon>筛选</x-button>
        <badge v-if="searcheNums" :text="searcheNums"></badge>
        </div>
        </flexbox-item>
    </flexbox>
    <div>
      <popup v-model="show7" @on-hide="popOnHide()" :hide-on-blur=false height="270px" is-transparent>
        <div style="width: 95%;background-color:#fff;height:250px;margin:0 auto;border-radius:5px;padding-top:10px;">
         <group>
           <selector text-align="left" title="系统" placeholder="请选择所属系统" placeholder-align="right" v-model="searchsys" name="sys" :options="sysList"></selector>
           <x-input title="关键字" placeholder="请输入搜索关键字" placeholder-align="right" v-model="searchkey" novalidate ></x-input>
         </group>
         <div style="padding:20px 15px;">
          <x-button mini type="primary"  @click.native="show7 = false">搜索</x-button>
          <x-button mini @click.native="searchsys='';searchkey='';show7 = false">清空</x-button>
         </div>
        </div>
      </popup>
    </div>
    </div>
  <div style="height:100vh;overflow: scroll;">
  <mt-loadmore :bottom-pull-text="bpt" :bottom-all-loaded="allLoaded" :bottom-method="loadBottom" ref="loadmore">
    <swipeout class="vux-1px-tb">
      <swipeout-item link="detail"  transition-mode="follow"  v-for="(task,index) in filterTask"  :key="task.sid+task.sys+index">
        <div v-if="task.status==0" slot="right-menu">
          <swipeout-button @click.native="onButtonClick('fav',task)" type="primary">同意</swipeout-button>
          <swipeout-button @click.native="onButtonClick('bohui',task)" type="warn">不同意</swipeout-button>
        </div>
        <div slot="content" class="vux-1px-b" style="padding:12px;text-align:left;" @click="showDetail(task)">{{task.title}}</div>
      </swipeout-item>
    </swipeout>
    </mt-loadmore>
    </div>
    <transition name="router-slid" mode="out-in">
            <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import "assets/iconfont/iconfont.css";
import vue from "vue";
import { Loadmore } from "mint-ui";
import { getUtList, updateUt, getXZDBList } from "src/service/getData";
vue.component(Loadmore.name, Loadmore);
import {
  Icon,
  XHeader,
  Swipeout,
  SwipeoutItem,
  SwipeoutButton,
  Flexbox,
  FlexboxItem,
  Badge,
  TransferDom,
  Popup,
  Tab,
  TabItem,
  Popover,
  Group,
  Selector,
  Cell,
  CellBox,
  XSwitch,
  XButton,
  XInput
} from "vux";
import { isNullOrUndefined } from "util";
export default {
  components: {
    Icon,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    Flexbox,
    FlexboxItem,
    Badge,
    TransferDom,
    Popup,
    Tab,
    TabItem,
    Popover,
    Group,
    Selector,
    Cell,
    CellBox,
    XSwitch,
    XButton,
    XInput,
    XHeader
  },
  data() {
    return {
      bpt: "上拉加载更多",
      tabIndex: 0,
      searcheNums: 0,
      page: 1,
      nums: 10, //每页显示数量
      allLoaded: false, //是否加载完所有内容
      show7: false,
      filterTask: [],
      sysList: [
        { key: "ICE", value: "行政督办系统" },
        { key: "WWSMS", value: "服装劳保系统" }
      ],
      popovervisble: false,
      taskList: [],
      xzdbList: [],
      activeName: "0",
      searchsys: "",
      searchkey: "",
      infocode: ""
    };
  },
  mounted() {
    this.dealSearch();
  },
  created() {
    this.getUserInfo();
    this.getUtList();
    this.getXZDBList();
  },
  methods: {
    getUserInfo() {
      if (process.env.NODE_ENV == "development") {
        this.infocode = "123";
      } else {
        var _this = this;
        var ddurl = document.URL.split("#")[0];
        var query = { ddurl: ddurl };
        var dd = window.dd;
        var res_corpId = "ding786250c40f654fe4";
        console.log("dd", dd);
        dd.ready(function() {
          dd.runtime.info({
            onSuccess: function(info) {},
            onFail: function(err) {
              alert("ready——登录验证失败，请联系管理员。");
            }
          });

          dd.runtime.permission.requestAuthCode({
            corpId: res_corpId,
            onSuccess: async function(info) {
              console.log("dd_info_code:" + info.code);
              _this.infocode = info.code;
            },
            onFail: function(err) {
              alert("requestAuthCode——登录验证失败，请联系管理员。");
            }
          });
        });
      }
      console.log("this.infocode :" + this.infocode);
    },
    //显示详情页
    showDetail(task) {
      this.$router.push({
        path: "/home/taskDetail",
        query: { eventId: task.sid, sys: task.sys }
      });
      console.log("showDetail");
    },
    getUtList() {
      getUtList({}).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.taskList = response.data.items;
          this.dealSearch();
          //  console.log("this.taskList", this.taskList);
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
      });
    },
    getXZDBList() {
      getXZDBList({}).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.xzdbList = response.data.items;
          this.dealSearch();
          //  console.log("this.xzdbList", this.xzdbList);
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
      });
    },
    loadBottom() {
      this.page++;
      this.dealSearch();
      this.$refs.loadmore.onBottomLoaded();
    },
    popOnHide() {
      this.dealSearch();
      console.log("on hide");
    },
    onItemClick(index) {
      this.page = 1;
      this.dealSearch();
    },
    onButtonClick(type, task) {
      // task.status = 1;
      console.log("on button click type", type);
      console.log("on button click task2", task);
      updateUt({ task: task, type: type }).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          //  this.taskList = response.data.items;
          //  this.dealSearch();
          task.status = 1;
          this.dealSearch();
          console.log("this.updateUt", response.data);
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
      });
    },
    dealSearch() {
      //全部任务
      console.log("this.tabIndex", this.tabIndex);
      console.log("this.searchsys", this.searchsys);
      console.log("this.searchkey", this.searchkey);
      console.log("this.task",this.task);
      this.searcheNums = 0;
      if (this.searchkey != "") this.searcheNums = this.searcheNums + 1;
      if (this.searchsys != "") this.searcheNums = this.searcheNums + 1;
      if (this.tabIndex === 2) {
        if (this.searchsys != "" && this.searchkey != "") {
          this.filterTask = this.xzdbList.filter(
            task =>
              (this.searchsys == task.sys) &
              (task.title.indexOf(this.searchkey) != -1 ||
                task.dept.indexOf(this.searchkey) != -1)
          );
        } else if (this.searchsys != "") {
          this.filterTask = this.xzdbList.filter(
            task => this.searchsys == task.sys
          );
        } else if (this.searchkey != "") {
          console.log(this.searchkey);
          this.filterTask = this.xzdbList.filter(
            task =>
              task.title.indexOf(this.searchkey) != -1 ||
              task.dept.indexOf(this.searchkey) != -1
          );
        } else {
          this.filterTask = this.xzdbList;
        }
      } else if (this.searchsys != "" && this.searchkey != "") {
        this.filterTask = this.taskList.filter(
          task =>
            (this.searchsys == task.sys) &
            (task.title.indexOf(this.searchkey) != -1 ||
              task.dept.indexOf(this.searchkey) != -1) &
            (this.tabIndex == task.status)
        );
      } else if (this.searchsys != "") {
        this.filterTask = this.taskList.filter(
          task => (this.searchsys == task.sys) & (this.tabIndex == task.status)
        );
      } else if (this.searchkey != "") {
        console.log(this.searchkey);
        console.log("this.taskList", this.taskList);
        this.filterTask = this.taskList.filter(
          task =>
            (task.title.indexOf(this.searchkey) != -1 ||
              task.dept.indexOf(this.searchkey) != -1) &
            (this.tabIndex == task.status)
        );
      } else {
        this.filterTask = this.taskList.filter(
          task => this.tabIndex == task.status
        );
          console.log("this.filterTask",this.filterTask);
         console.log("this.task",this.task);

      }
      if (this.filterTask.length < this.page * this.nums + 1) {
        this.allLoaded = true;
      } else {
        this.allLoaded = false;
      }
      this.filterTask = this.filterTask.slice(0, this.nums * this.page);
      console.log("dealSearch_over");
    },
    showSearch() {
      this.show7 = true;
      console.log("showSearch");
    }
  }
};
</script>
<style lang="less" scoped>
@import "~vux/src/styles/1px.less";
@import "~vux/src/styles/center.less";
#head_top {
  background-color: #1e90ff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2.95rem;
}
.box {
  padding: 15px;
}
.icon-daiban {
  font-size: 25px;
}
.icon-yiban {
  font-size: 25px;
}
.icon-quanbu {
  font-size: 25px;
}
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}
.task_list_ul {
  .task_list_li {
    background-color: #fff;
    display: flex;
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.6rem 0;
    text-align: left;
    .task_list_title {
      width: 80%;
      text-align: left;
    }
    .task_list_approve {
      width: 20%;
      text-align: right;
    }
  }
}

</style>